<template>
  <div id="index" ref="appRef">
    <div class="bg1">
      <!-- 粒子背景 canvas -->
      <div id="particles-js"></div>
      <div v-if="loading" class="loading">
        <LoadingAnimation></LoadingAnimation>
      </div>
      <div v-else class="host-body">
        <div class="login-container">
          <div class="login-box">
            <h2>管城回族区人民检察院</h2>
            <el-form
              :model="loginForm"
              :rules="rules"
              ref="loginForm"
              label-width="0px"
              class="login-form"
            >
              <el-form-item prop="username">
                <el-input
                  v-model="loginForm.username"
                  placeholder="请输入用户名"
                  prefix-icon="el-icon-user"
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleLogin" class="login-btn">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import LoadingAnimation from "@/components/LoadingAnimation.vue";
  import drawMixin from "../utils/drawMixin";
  import 'particles.js';

  export default {
    mixins: [drawMixin],
    data() {
      return {
        loginForm: {
          username: "",
          password: "",
        },
        rules: {
          username: [
            { required: true, message: "请输入用户名", trigger: "blur" },
          ],
          password: [
            { required: true, message: "请输入密码", trigger: "blur" },
          ],
        },
      };
    },
    components: {
      LoadingAnimation,
    },
    mounted() {
      // 初始化粒子背景效果
      particlesJS('particles-js', {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#ffffff"
          },
          "shape": {
            "type": "circle",
            "stroke": {
              "width": 0,
              "color": "#000000"
            }
          },
          "opacity": {
            "value": 0.5,
            "random": false,
            "anim": {
              "enable": false,
              "speed": 1,
              "opacity_min": 0.1,
              "sync": false
            }
          },
          "size": {
            "value": 3,
            "random": true,
            "anim": {
              "enable": false,
              "speed": 40,
              "size_min": 0.1,
              "sync": false
            }
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 6,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "attract": {
              "enable": false,
              "rotateX": 600,
              "rotateY": 1200
            }
          }
        },
        "interactivity": {
          "detect_on": "canvas",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "repulse"
            },
            "onclick": {
              "enable": true,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 400,
              "line_linked": {
                "opacity": 1
              }
            },
            "bubble": {
              "distance": 400,
              "size": 40,
              "duration": 2,
              "opacity": 8,
              "speed": 3
            },
            "repulse": {
              "distance": 200,
              "duration": 0.4
            },
            "push": {
              "particles_nb": 4
            },
            "remove": {
              "particles_nb": 2
            }
          }
        },
        "retina_detect": true
      });
    },
    methods: {
      handleLogin() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            console.log("登录成功");
            this.$router.push({ path: '/TouristT' });
          } else {
            console.log("表单验证失败");
            return false;
          }
        });
      }
    },
  };
</script>

<style lang="scss" scoped>
  @import "../assets/scss/index.scss";

  .bg1 {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background-color: #0e1b3b;
  }

  #particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .login-container {
    width: 1920px;
    height: 1080px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .login-box {
    width: 400px;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    text-align: center;
    color: #fff;
  }

  h2 {
    margin-bottom: 30px;
    color: #fff;
  }

  .el-form-item {
    margin-bottom: 20px;
  }

  .el-input {
    width: 100%;
    color: #fff;
  }

  .el-input__inner {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    color: #fff;
  }

  .el-input__icon {
    color: #fff;
  }

  .el-button {
    width: 100%;
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
  }
</style>
